<style type="text/css">
    .rowNew{
        clear: both;float: left;width: 50%;
    }
    .reset{
        clear: both;
    }
    #liBotones {margin: 2px; padding: 4px 0; cursor: pointer; list-style: none;float: right}
    .btnAccionesFlujos{
        display: block;width: 100%;padding: 1px;margin: 5px 0px; 
    }
    #divRespuestas{
        display: none;
    }
</style>
<script type="text/javascript">
    var prefijo = "Flujos_";
    var globalOpciones = "";
    var valoresActualiza = {
        nucleo : '<?php echo (trim($model->FLUJONUCLEO) != "") ? $model->FLUJONUCLEO : ''; ?>',
        conteo : '<?php echo (trim($model->AEAID) != "") ? $model->AEAID : ''; ?>',
        modulo : '<?php echo (isset($model->FLUJOMODULO)) ? $model->FLUJOMODULO : ''; ?>'
    };
    var globalHaGuardadoRequerido = false;
    var timestamp = <?php echo $timestamp; ?>;
<?php if (isset($actualiza)) { ?>
        $(document).ready(function(){
            funcionEdicion();
        }); //fin $(document).ready(function(){
<?php } ?>
    function funcionEdicion(){
        $("#" + prefijo + "FLUJOTIPONUCLEO").trigger("change");
    } //fin function funcionEdicion(){
    function cambiaTipoFlujo(valOpc,valCombo,valAux1){
        if(valOpc == "" || valCombo == "") return false
        $(".upprogress").show();
        var tipoFlujo = document.getElementById(prefijo + "FLUJOTIPONUCLEO").value;
        $.post("index.php?r=flujos/combos",{opc:valOpc,val:tipoFlujo,val1:valAux1},function(options){
            cargaCombosLiszt(valCombo,options);
            if(valOpc == "tipFlujo")
                asignaSiEdita(prefijo + valCombo,'Nucleo');
            else
                asignaSiEdita(prefijo + valCombo,'Modulo');
            $(".upprogress").hide();
        });
    } //fin function cambiaTipoFlujo(tipoFlujo){
    function asignaSiEdita(combo,opc){
        switch(opc){
            case 'Nucleo':
                if(valoresActualiza.nucleo != "")
                    $("#" + combo).val(valoresActualiza.nucleo).trigger("liszt:updated").trigger("change");
                break;
            case 'Conteo':
                
                if(valoresActualiza.conteo != "")
                    $("#" + combo).val(valoresActualiza.conteo).trigger("liszt:updated").trigger("change");
                break;
            case 'Modulo':
                if(valoresActualiza.modulo != "")
                    $("#" + combo).val(valoresActualiza.modulo).trigger("liszt:updated");
                $("#" + prefijo + "FLUJOTIPO").trigger("change");
                break;
        } //fin switch(opc){
        return true;
    } //fin function asignaSiEdita(combo,options){
    function cargaCombosLiszt(combo,options,opt){
        if(opt == undefined)
            var prefi = "#Flujos_";
        else
            var prefi = "#";
        if(options =="") return false;
        $(prefi + combo).html('');
        $(prefi + combo).append(options);
        $(prefi + combo).trigger("liszt:updated");
        return true;
    } //fin function cargaCombosLiszt(combo,options){
    function tipoFlujo(tipoFlujo){
        if(tipoFlujo == "") return false;
        var tipoNucleo = document.getElementById(prefijo + "FLUJOTIPONUCLEO").value;
        var nucleo = document.getElementById(prefijo + "FLUJONUCLEO").value;
        var modulo = document.getElementById(prefijo + "FLUJOMODULO").value;
        if(tipoNucleo == "" || nucleo =="" || modulo == ""){
            alert("Debe ingresar primero el tipo de nucleo, nucleo y módulo antes de asignar el flujo");
            document.getElementById(prefijo + "FLUJOTIPO").value = '';
            return false;
        }
        $(".upprogress").show();
        document.getElementById("divValConteo").style.display = "none";
        document.getElementById("divRangoFlujo").style.display = "none";
        document.getElementById("divRespuestas").style.display = "block";
        switch(tipoFlujo){
            case 'Conteo':
                $.post("index.php?r=flujos/combos",{opc:tipoFlujo,tipoNucleo:tipoNucleo,nucleo:nucleo,modulo:modulo},function(options){
                    globalOpciones = options;
                    cargaCombosLiszt("Flujos_camposSinFiltro",options,true);
                    document.getElementById("divValConteo").style.display = "block";
                    actualizaCombosSinyConFiltro();
                    $(".upprogress").hide();
                });
                break;
            case 'Rango':
                document.getElementById("divRangoFlujo").style.display = "block";
                $.post("index.php?r=flujos/combos",{opc:tipoFlujo,tipoNucleo:tipoNucleo,nucleo:nucleo,modulo:modulo},function(options){
                    cargaCombosLiszt("camposSinFiltro",options);
                    actualizaCombosSinyConFiltro();
                    $(".upprogress").hide();
                });
                break;
            case 'Requerido':
                document.getElementById("divCampoRequerido").style.display = "block";
                document.getElementById(prefijo + "campoRequerido").innerHTML = "";
                $.post("index.php?r=flujos/combos",{opc:tipoFlujo,tipoNucleo:tipoNucleo,nucleo:nucleo,modulo:modulo},function(options){
                    var options = options.split("|&|");
                    globalOpciones = options[1];
                    cargaCombosLiszt("campoRequerido",options[0]);
                    cargaCombosLiszt("camposSinFiltro",options[1]);
                    actualizaCombosSinyConFiltro();
                    $(".upprogress").hide();
                });
                break;
        }
    } //fin function tipoFlujo(tipoFlujo){
    function actualizaCombosSinyConFiltro(){
        diferenciaCombos(document.getElementById("camposConFiltro"),document.getElementById("Flujos_camposSinFiltro"));
        $("#Flujos_camposSinFiltro").trigger("liszt:updated");
    
    } //fin function actualizaCombosSinyConFiltro(){
    function adicionaFlujo(){
        var comboSin = document.getElementById('Flujos_camposSinFiltro');
        var comboCon = document.getElementById('camposConFiltro');
        var i = 0;
        for(i = 0;i < comboSin.length;i++){
            if(comboSin.options[i].selected && comboSin.options[i].value != ""){
                mueveOpcion(i, comboSin,comboCon);
                remueveOpcion(comboSin,i);
                i --;
            }                
        }
        $("#Flujos_camposSinFiltro").trigger("liszt:updated");
        $("#camposConFiltro").trigger("liszt:updated");
        return false;
    }
    function remueveOpcion(combo, indice){ 
        if(combo.length > 0){
            combo.options[indice] = null;
        }
    } //fin function remueveOpcion(combo, indice){ 
    function mueveOpcion(indice, selectOrigen,selectDestino){    
        selectDestino.options[selectDestino.options.length]= new Option(selectOrigen.options[indice].text, selectOrigen.options[indice].value);
        return true;
    } //fin function mueveOpcion(indice, selectOrigen,selectDestino){
    function eliminaDeFlujo(){
        var comboCon = document.getElementById('camposConFiltro');
        var comboSin = document.getElementById('Flujos_camposSinFiltro');
        var i = 0;
        for(i = 0;i < comboCon.length;i++){
            if(comboCon.options[i].selected){
                mueveOpcion(i,comboCon, comboSin);
                remueveOpcion(comboCon,i);
                i --;
            }                
        }
        $("#Flujos_camposSinFiltro").trigger("liszt:updated");
        $("#camposConFiltro").trigger("liszt:updated");
    } //fin function eliminaDeFlujo(){
    function eliminaCampos(){
        var comboCon = document.getElementById('camposConFiltro');
        var comboSin = document.getElementById('Flujos_camposSinFiltro');
        var i = 0;
        while(comboCon.length > 0){
            mueveOpcion(i,comboCon, comboSin);
            remueveOpcion(comboCon,i);
        }
        $("#Flujos_camposSinFiltro").trigger("liszt:updated");
    } //fin function eliminaCampos(){
    function guardaRequerido(opc){
        var combo = document.getElementById("camposConFiltro");
        var campo = document.getElementById("Flujos_campoRequerido").value;
        if(combo.length <= 0){
            alert("No se identificaron campos para aplicar el flujo");
            return false;
        }
        var valCombo = combo.options[0].value;
        var i = 1;
        for(i=1;i<combo.length;i++){
            valCombo = valCombo + ',' + combo.options[i].value;
        }
        $(".upprogress").show();
        $.post("index.php?r=flujos/guardaRequeridos",{time:timestamp,alias:valCombo,campo:campo},function(result){
            if(parseInt(result) == 1){
                globalHaGuardadoRequerido = true;
                        $("#Flujos_campoRequerido").trigger("liszt:updated");
                        document.getElementById("Flujos_campoRequerido").value = '';
                        cargaCombosLiszt("camposSinFiltro",globalOpciones);
                        document.getElementById("camposConFiltro").innerHTML = "";
            }else{
                alert("No ha sido posible guardar el campo requerido");
            }
            $(".upprogress").hide();
        }); //fin $.post("index.php?r=flujos/guardaRequeridos",{time:timestamp,alias:valCombo,campo:campo},function(){
    } //fin function guardaRequerido(){
    function cambiaCampoRequerido(campoId){
        if(campoId == "") return false;
        $(".upprogress").show();
        $.post("index.php?r=flujos/Requeridos",{campo:campoId,time:timestamp},function(data){
            document.getElementById("camposConFiltro").innerHTML = '';
            $("#camposConFiltro").trigger("liszt:updated");
            cargaCombosLiszt("camposConFiltro",data,true);
            cargaCombosLiszt("camposSinFiltro",globalOpciones);
            diferenciaCombos(document.getElementById("camposConFiltro"),document.getElementById("Flujos_camposSinFiltro"));
            $("#Flujos_camposSinFiltro").trigger("liszt:updated");
            $(".upprogress").hide();
        });
    } //fin function cambiaCampoRequerido(campoId){
    function antesGuardar(){
        //        var opc = document.getElementById("Flujos_FLUJOTIPO").value;
        var filtro = document.getElementById("camposConFiltro"),i=0,camposElegidos = "";
        if(filtro.length > 0){
            for(i = 0;i < filtro.length;i++){
                camposElegidos = camposElegidos + "," + filtro.options[i].value;
            }
            document.getElementById("camposElegidos").value = camposElegidos;
            $("#flujos-form").submit();
        }else{
            alert("No se han ingresado ALIAS para el flujo");
            return false;
        }
    } //fin function antesGuardar(){
    function eliminaOpcionPadre(id,campoId){
        var combo = document.getElementById(id);
        var i = 0;
        for(i = 0;i < combo.length; i++){
            //            console.log(combo.options[i].value," --> ",i," campo = ",campoId);
            if(combo.options[i].value == campoId)
                remueveOpcion(combo,i);
        }
    } //fin function eliminaOpcionPadre(id,campoId){
    function diferenciaCombos(comboBase,comboOrigen){
        var i = 0;
        var c = 0;
        for(i = 0;i < comboBase.length; i++){
            for(c = 0;c < comboOrigen.length; c++){
                if(comboBase.options[i].value == comboOrigen.options[c].value){
                    remueveOpcion(comboOrigen, c);
                }
            }
        }
    } //fin function diferenciaCombos(comboBase,comboOrigen){
    function validaObligatorios(){
        var flujo = document.getElementById(prefijo + "FLUJOTIPONUCLEO").value;
        var nucleo = document.getElementById(prefijo + "FLUJOTIPONUCLEO").value;
        var modulo = document.getElementById(prefijo + "FLUJOTIPONUCLEO").value;
        var tipo = document.getElementById(prefijo + "FLUJOTIPO").value;
        var nombre = document.getElementById(prefijo + "FLUJONOMBRE").value;
        var combo = document.getElementById("camposConFiltro");
        if(flujo == "" || nucleo == "" || modulo == ""){
            alert("Debe ingresar el tipo de nucleo, nucleo y modulo antes de continuar");
            return false;
        }
        if(tipo == ""){
            alert("El tipo de flujo es obligatorio");
            return false;
        }
        if(nombre == ""){
            alert("Debe asignar un nombre al flujo");
            return false;
        }
        switch(tipo){
            case 'Conteo':
                if(!document.getElementById(prefijo + "FLUJOVALORCONTEO").value.match(/^\d+$/)){
                    alert("El valor minímo de respuestas debe ser un número entero valido");
                    return false;
                }
                break;
            case 'Rango':
                if(!document.getElementById(prefijo + "FLUJODESDE").value.match(/^\d+$/) || !document.getElementById(prefijo + "FLUJOFIN").value.match(/^\d+$/)){
                    alert("Los valores de los campos DESDE y HASTA deben ser números enteros validos");
                    return false;
                }                
                if(combo.length <= 0){
                    alert("No se identificaron campos para aplicar el flujo");
                    return false;
                }
                break;
            case 'Requerido':
                if(!globalHaGuardadoRequerido){
                    alert("No se han guardado flujos requeridos para almacenar");
                    return false;
                }
                break;
        } //fin switch(tipo){
        return true;
    } //fin function validaObligatorios(){
</script>
<div class="form">
    <?php
    $form = $this->beginWidget('GxActiveForm', array(
        'id' => 'flujos-form',
        'enableAjaxValidation' => false,
        'htmlOptions' => array('OnSubmit' => 'return validaObligatorios();'),
            ));
    ?>
    <p class="note">
        <?php echo Yii::t('app', 'Los campos con'); ?> <span class="required">*</span> <?php echo Yii::t('app', 'son obligatorios.'); ?>.
    </p>
    <?php echo $form->errorSummary($model); ?>
    <fieldset>
        <legend>Asignación del flujo</legend>
        <div class="row rowNew" >
            <?php echo $form->labelEx($model, 'FLUJOTIPONUCLEO'); ?>
            <?php echo $form->dropDownList($model, 'FLUJOTIPONUCLEO', array('' => "Seleccione...", 'Basico' => "Básico", 'Especifico' => "Especifico"), array("onchange" => "cambiaTipoFlujo('tipFlujo','FLUJONUCLEO');")); ?>
            <?php echo $form->error($model, 'FLUJOTIPONUCLEO'); ?>
        </div><!-- row -->
        <div class="row">
            <?php echo $form->labelEx($model, 'FLUJONUCLEO'); ?>
            <?php echo $form->dropDownList($model, 'FLUJONUCLEO', array('' => "Seleccione"), array('class' => 'Ccombo', "onchange" => "cambiaTipoFlujo('moduloFlujo','FLUJOMODULO',this.value);")); ?>
            <?php echo $form->error($model, 'FLUJONUCLEO'); ?>
        </div><!-- row -->
        <div class="row rowNew">
            <?php echo $form->labelEx($model, 'FLUJOMODULO'); ?>
            <?php echo $form->dropDownList($model, 'FLUJOMODULO', array('' => "Seleccione"), array('class' => 'Ccombo', "onchange" =>"$('#Flujos_FLUJOTIPO').trigger('change');")); ?>
            <?php echo $form->error($model, 'FLUJOMODULO'); ?>
        </div><!-- row -->
    </fieldset>
    <fieldset>
        <legend>Información del flujo</legend>
        <div class="row rowNew">
            <?php echo $form->labelEx($model, 'FLUJOTIPO'); ?>
            <?php echo $form->dropDownList($model, 'FLUJOTIPO', array('' => "Elija", 'Conteo' => "Minimo de respuestas", 'Rango' => "Rango", 'Requerido' => "Requerido"), array("onchange" => "tipoFlujo(this.value);")); ?>
            <?php echo $form->error($model, 'FLUJOTIPO'); ?>
        </div><!-- row -->
        <div id="divValConteo" class="" style="display: none;float: left">
            <?php echo $form->labelEx($model, 'FLUJOVALORCONTEO'); ?>
            <?php echo $form->textField($model, 'FLUJOVALORCONTEO', array('class' => 'Cnumero', 'maxlength' => 4)); ?>
            <?php echo $form->error($model, 'FLUJOVALORCONTEO'); ?>
        </div><!-- fin divValConteo -->
        <div id="divRangoFlujo" class="row " style="display: none" >
            <?php echo $form->labelEx($model, 'FLUJODESDE', array("style" => 'display:inline')); ?>
            <?php echo $form->textField($model, 'FLUJODESDE', array('class' => 'Cnumero', 'maxlength' => 3)); ?>
            <?php echo $form->error($model, 'FLUJODESDE'); ?>
            <?php echo $form->labelEx($model, 'FLUJOFIN', array("style" => 'display:inline')); ?>
            <?php echo $form->textField($model, 'FLUJOFIN', array('class' => 'Cnumero', 'maxlength' => 3)); ?>
            <?php echo $form->error($model, 'FLUJOFIN'); ?>
        </div>
        <div id="divCampoRequerido" class="row " style="display: none" >
            <label for="Flujos_campoRequerido" style="display: inline">Campo padre</label>
            <select id="Flujos_campoRequerido" name="Flujos_campoRequerido" onchange="cambiaCampoRequerido(this.value);" class="Ccombo" style="width: 203px;min-width: 203px">
            </select>
            <li id="liBotones" class="ui-state-default ui-corner-all" title="Guarda requerido" onclick="guardaRequerido();">
                <span class="ui-icon ui-icon-disk" ></span>
            </li>
        </div><!-- fin divCampoRequerido -->
        <div class="reset"></div>
        <div id="divRespuestas">
            <div style="float: left;width: 42%;">
                <label for="Flujos_camposSinFiltro">Alias</label>
                <select id="Flujos_camposSinFiltro" name="Flujos_camposSinFiltro" multiple="" class="Ccombo" style="width: 208px">
                </select>
            </div>
            <div style="float: left;width: 12%;padding: 1px 2px;">
                <button type="button" class="btnAccionesFlujos" onclick="adicionaFlujo();">Agregar</button>
                <button type="button" class="btnAccionesFlujos" onclick="eliminaDeFlujo();" >Quitar</button>
                <button type="button" class="btnAccionesFlujos" onclick="eliminaCampos();">Quitar todo</button>
            </div>
            <div style="float: left;width: 45%">
                <label for="camposConFiltro">Campos parte del flujo</label>
                <?php echo CHtml::dropDownList('camposConFiltro', '', GxHtml::listDataEx(Yii::app()->db->createCommand("SELECT * FROM FLUJOS_REQUERIDOS FLU INNER JOIN ALIAS AL ON AL.ALSID = FLU.ALSID WHERE FLU.FLUJOID = $id ")->setFetchMode(PDO::FETCH_OBJ)->queryAll(), 'ALSID', 'ALSNOMBRE'), Array('multiple' => 'multiple', 'sytle' => 'width: 220px', 'name' => 'camposConFiltro', 'class' => 'Ccombo')); ?>
            </div>
        </div>
        <div class="row rowNew" >
            <?php echo $form->labelEx($model, 'FLUJONOMBRE'); ?>
            <?php echo $form->textField($model, 'FLUJONOMBRE', array('maxlength' => 45)); ?>
            <?php echo $form->error($model, 'FLUJONOMBRE'); ?>
        </div><!-- row -->
    </fieldset>
    <input type="hidden" name="timestamp" id="timestamp" value="<?php echo $timestamp; ?>" />
    <input type="hidden" name="camposElegidos" id="camposElegidos"  />
    <button type="button" class="add_input" onclick="antesGuardar();" >Guardar Flujo</button>
    <?php
    $this->endWidget();
    ?>
</div><!-- form -->
<div class="upprogress">
    <img alt="Cargando..." src="images/loading.gif" />
</div>
